{% extends 'template.html' %}
{% block title %}
    Files
{% endblock %}
{% block navList %}
    <li class="sidebar-list-item">
        <a href="/dashboard" class="sidebar-link text-muted">
            <i class="o-home-1 mr-3 text-gray"></i><span>Overview</span>
        </a>
    </li>
    <li class="sidebar-list-item">
        <a href="/files" class="sidebar-link text-muted active">
            <i class="o-home-1 mr-3 text-gray"></i><span>Files</span>
        </a>
    </li>
{% endblock %}
{% block body %}
    <div class="page-holder w-100 d-flex flex-wrap">
        <div class="page-holder w-100 d-flex flex-wrap">
            <div class="container-fluid px-xl-5">
                <div class="input-group mb-3 col-lg-4 col-sm-12">
                    <div class="input-group-prepend">
                        <button id="addFile" type="button" class="btn btn-primary">Add File</button>
                    </div>
                    <input type="text" placeholder="File name" aria-label="Example text with button addon"
                           aria-describedby="button-addon1" class="form-control" id="filename">
                </div>
                <section class="py-5">
                    <div class="row mb-4">
                        {% for f in files %}
                            <div class="col-lg-3 col-sm-12">
                                <div class="bg-white shadow roundy px-4 py-3 d-flex align-items-center justify-content-between mb-4">
                                    <div class="flex-grow-1 d-flex align-items-center">
                                        <div class="dot mr-3 bg-blue"></div>
                                        <div class="text">
                                            <h6 class="mb-0">
                                                <a href="/motify?filename={{ f.name }}" target="_blank">{{ f.name }}</a>
                                            </h6>
                                            <span class="text-gray">Last: {{ f.st_mtime }}</span>
                                        </div>
                                    </div>
                                    <div class="icon bg-danger text-white" onclick="deleteFile('{{ f.name }}')"
                                         style="cursor: pointer">
                                        删除
                                    </div>&nbsp;
                                    <div class="icon bg-dark text-white" onclick="download('{{ f.name }}')"
                                         style="cursor: pointer">
                                        下载
                                    </div>&nbsp;
                                    <div class="icon bg-blue text-white">{{ f.st_size }}KB</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </section>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        function download(filename) {
            window.open('/download?filename=' + filename)
        }

        function deleteFile(filename) {
            $.ajax({
                type: "POST",
                url: '/delFile/',
                dataType: "json",
                traditional: true,
                data: {
                    filename: filename
                },
                async: false,
                success: function (response) {
                    if (response.code === 200) {
                        window.location.reload()
                    } else {
                        alert(response.message)
                    }
                },
                error: function (e) {
                    alert('Error')
                },
            })
        }

        $('#addFile').click(() => {
            $.ajax({
                type: "POST",
                url: '/newFile/',
                dataType: "json",
                traditional: true,
                data: {
                    filename: $('#filename').val()
                },
                async: false,
                success: function (response) {
                    if (response.code === 200) {
                        window.location.reload()
                    } else {
                        alert(response.message)
                    }
                },
                error: function (e) {
                    alert('Error')
                },
            })
        })
    </script>
{% endblock %}